<!doctype html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>uuAltCSS.js - Reference</title>
<style type="text/css">@import url(README.css);</style>
<script type="text/xaml" id="xaml"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script>
window.UUMETA_DEBUG = 1;
window.UUMETA_IMAGE_DIR = "img";
</script>
<!--
<script src="../src/uuMeta.js"></script>
<script src="../src/uuMeta.cdsl.js"></script>
<script src="../src/uuMeta.data.js"></script>
<script src="../src/uuMeta.normalize.js"></script>
<script src="../src/uuMeta.event.resize.js"></script>
<script src="../src/uuCodec.js"></script>
<script src="../src/uuToken.js"></script>
<script src="../src/uuImage.js"></script>
<script src="../src/uuStyle.js"></script>
<script src="../src/uuStyle.shadow.js"></script>
<script src="../src/uuStyle.opacity.js"></script>
<script src="../src/uuStyleSheet.js"></script>
<script src="../src/uuQuery.js"></script>
<script src="../src/uuColor.js"></script>
<script src="../src/uuCanvas.js"></script>
<script src="../src/uuLayer.js"></script>
<script src="../src/uuCSSValidator.js"></script>
<script src="../src/uuAltCSS.js"></script>
<script src="../src/uuAltCSS.ie.js"></script>
<script src="../src/uuAltCSS.boxeffect.js"></script>
<script src="../src/uuAltCSS.imports.js"></script>
<script src="../src/uuAltCSS.cleanup.js"></script>
<script src="../src/uuAltCSS.calcspec.js"></script>
 -->
<script src="uuAltCSS.js"></script>

</head>
<body>
<p>
   | <a href="http://code.google.com/p/uupaa-js-spinoff/">HOME</a>
   | <a href="./README.htm">README</a>
   | <a href="./DEMO.htm">DEMO</a>
   | <a href="./CLASS.htm">CLASS</a>
   | <a href="./CHANGELOG.htm">CHANGE LOG</a>
   | <a href="./DONATE.htm">DONATE</a>
   | <a href="./LICENSE.htm">LICENSE</a>
   |
</p>

<hr />
| <a href="#cdsl">Conditional Selector</a>
| <a href="#boot">Boot Loader</a> | <br />
| <a href="#uuAltCSS">uuAltCSS</a>
| <a href="#getExStyle">uuAltCSS.getExStyle</a>
| <a href="#setExStyle">uuAltCSS.setExStyle</a>
| <a href="#redraw">uuAltCSS.redraw</a> | <br />
| <a href="#posfxd">position: fixed</a>
| <a href="#alphapng">透過 png</a>
| <a href="#maxmin">max-width:</a>
| <a href="#opacity">opacity:</a>
| <a href="#displaytable">-uu-display: table</a>
| <a href="#textshadow">-uu-text-shadow:</a>
| <br />
| <a href="#boxshadow">-uu-box-shadow:</a>
| <a href="#boxreflect">-uu-box-reflect:</a>
| <a href="#bradius">-uu-border-radius:</a>
| <a href="#gradient">-uu-gradient()</a>
| <a href="#mbg">multiple backgrounds</a>
| <br />
| <a href="#boxeffect">-uu-box-effect:</a>
|

<hr />
<h2>Conditional Selector - コンディショナルセレクタ<a id="consel"></a></h2>
<div lang="ja">
<p lang="ja">コンディショナルセレクタは、ブラウザのレンダリングバグを吸収する手助けをします。</p>
<p lang="ja">
  uuAltCSS.js は、&lt;html class=""&gt; に情報を追加します。
<ul>
  <li>どんなブラウザか, バージョンはいくつか</li>
  <li>JavaScript が使えるか</li>
  <li>Silverlight が使えるか</li>
  <li>Flash7 以上が使えるか</li>
  <li>HTML5::Canvas が使えるか</li>
  <li>ディスプレイサイズが 800 x 600 未満か</li>
  <li>ディスプレイサイズが 1200 x 1000 以上か</li>
</ul>
情報の追加は、CSS の解析処理の直前に行われます。
JavaScript 有効/無効でスタイルを変化させたい場合は、以下のように HTML を記述してください。</div>
<pre class="eg">
  &lt;html class="<b>ifnojs</b>"&gt;
  ...
  &lt;/html&gt;
</pre>
<p>uuAltCSS.js は &lt;html class="ifnojs"&gt; を &lt;html class="ifjs"&gt; に置換します。
   (JavaScript が OFF の環境では、uuAltCSS.js による置換が行われないため、&lt;html class="ifnojs"&gt; のままになります。)</p>
<a class="run" href="demo/conditional-selector/need.js.htm">DEMO</a>
<pre class="eg">
  &lt;html class="<b>ifnojs</b>"&gt;
  &lt;head&gt;
  &lt;style&gt;
    <b>html.ifnojs .needjs</b> { color: red; display: block; }
    <b>html.ifjs .needjs</b> { display: none; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="<b>needjs</b>"&gt;
      このページは JavaScript を利用しています。JavaScript を ON にして、ページを再読み込みしてください。
    &lt;/div&gt;
    &lt;p&gt;JavaScript が OFF の場合は、赤いメッセージが表示されます。&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
</pre>

<p>IE と他のブラウザでスタイルを分けて適用する場合は、以下のように全体に適用したいスタイルと共に、特別なスタイルを html.ifie6, html.ifie7, html.ifie8 で指定します。</p>
<a class="run" href="demo/conditional-selector/ie.htm">DEMO</a>
<pre class="eg">
  &lt;style&gt;
    div { color: black } /* IE以外なら黒に */
    <b>html.ifie6</b> div { color: red } /* IE6なら赤になる */
    <b>html.ifie7</b> div { color: green } /* IE7なら緑になる */
    <b>html.ifie8</b> div { color: blue } /* IE8なら青になる */
  &lt;/style&gt;
  &lt;body&gt;
    &lt;div&gt;IE以外なら黒に, IE6なら赤に, IE7なら緑に, IE8なら青になります&lt;/div&gt;
  &lt;/body&gt;
</pre>
<h3>Conditional Selector IDENT - 識別子の一覧</h3>
<p lang="ja">利用可能な識別子の一覧です。
<br />識別子は <i>if</i> プリフィクスで始まります。末尾の、b や s は b(big,以上), s(small,未満) を意味します。</p>

<table>
<tr><th>IDENT</th><th>条件</th></tr>
<tr><td>ifie</td><td>IE なら</td></tr>
<tr><td>ifie6</td><td>IE 6 なら</td></tr>
<tr><td>ifie7</td><td>IE 7 なら</td></tr>
<tr><td>ifie67</td><td>IE 6 または IE 7 なら</td></tr>
<tr><td>ifie8</td><td>IE 8 なら</td></tr>
<tr><td>ifopera</td><td>Opera なら</td></tr>
<tr><td>ifopera92</td><td>Opera 9.20～9.29 なら</td></tr>
<tr><td>ifopera95</td><td>Opera 9.50～9.59 なら</td></tr>
<tr><td>ifopera96</td><td>Opera 9.60～9.69 なら</td></tr>
<tr><td>ifopera10</td><td>Opera 10.00～10.09 なら</td></tr>
<tr><td>ifopera101</td><td>Opera 10.10～10.19 なら</td></tr>
<tr><td>ifgecko</td><td>Gecko 搭載ブラウザなら</td></tr>
<tr><td>ifgecko191b</td><td>Gecko engine version が 1.9.1 以上なら (Firefox 3.5 以上なら)</td></tr>
<tr><td>iffx</td><td>Firefox Version 2.0 以上なら</td></tr>
<tr><td>iffx2</td><td>Firefox 2.0 なら</td></tr>
<tr><td>iffx3</td><td>Firefox 3.0 なら</td></tr>
<tr><td>iffx35</td><td>Firefox 3.5 なら</td></tr>
<tr><td>ifwebkit</td><td>WebKit 搭載ブラウザなら(Safari, iPhone, iPod, Google Chrome 等を含む)</td></tr>
<tr><td>ifwebkit522b</td><td>WebKit engine version が 522 以上なら (Safari 3 以上なら) </td></tr>
<tr><td>ifwebkit530b</td><td>WebKit engine version が 530 以上なら (Safari 4 以上なら) </td></tr>
<tr><td>ifsafari</td><td>Safari 系ブラウザなら (Google Chromeは含まない)</td></tr>
<tr><td>ifsafari3</td><td>Safari 3 なら</td></tr>
<tr><td>ifsafari32</td><td>Safari 3.2 なら</td></tr>
<tr><td>ifsafari4</td><td>Safari 4 なら</td></tr>
<tr><td>ifiphone</td><td>iPhone または iPod なら</td></tr>
<tr><td>ifchrome</td><td>Google Chrome なら</td></tr>
<tr><td>ifchrome1</td><td>Google Chrome 1 なら</td></tr>
<tr><td>ifchrome2</td><td>Google Chrome 2 なら</td></tr>
<tr><td>ifchrome3</td><td>Google Chrome 3 なら</td></tr>
<tr><td>ifsl</td><td>Silverlight Version 1以上がインストールされているなら</td></tr>
<tr><td>ifflash</td><td>Flash Version 7以上がインストールされているなら</td></tr>
<tr><td>ifcanvas</td><td>HTML5::Canvas が利用可能な環境なら(uuCanvas.js 含む)</td></tr>
<tr><td>ifjs</td><td>JavaScript が利用可能なら</td></tr>
<tr><td>ifw800s</td><td>ディスプレイの幅が 800px 未満なら</td></tr>
<tr><td>ifw1200b</td><td>ディスプレイの幅が 1200px 以上なら</td></tr>
<tr><td>ifh600s</td><td>ディスプレイの高さが 600px 未満なら</td></tr>
<tr><td>ifh1000b</td><td>ディスプレイの高さが 1000px 以上なら</td></tr>
</table>
<p>ブラウザ名 + バージョン番号は自動生成するので、上記以外の(将来の)バージョンが登場してもサポートが可能です。</p>

<p>各ブラウザで<a class="run" href="demo/conditional-selector/consel.htm">実行</a>すると、
   &lt;html class=""&gt; が以下のように設定されます。</p>
<table>
<tr><th>Browser</th><th>&lt;html class="..."&gt;</th></tr>
<tr><td>IE 6</td><td>&lt;html class="ifjs ifie ifie6 ifie67 ifsl ifflash ifcanvas"&gt;</td></tr>
<tr><td>IE 8</td><td>&lt;html class="ifjs ifie ifie8 ifsl ifflash ifcanvas"&gt;</td></tr>
<tr><td>Opera 10.00</td><td>&lt;html class="ifjs ifopera ifopera10 ifsl ifflash ifcanvas"&gt;</td></tr>
<tr><td>Google Chrome 3</td><td>&lt;html class="ifjs ifwebkit ifwebkit522b ifwebkit530b ifchrome ifchrome3 ifsl ifflash ifcanvas"&gt;</td></tr>
<tr><td>Safari 4</td><td>&lt;html class="ifjs ifwebkit ifwebkit522b ifwebkit530b ifsafari ifsafari4 ifsl ifflash ifcanvas"&gt;</td></tr>
<tr><td>iPhone OS 3.0</td><td>&lt;html class="ifjs ifwebkit ifwebkit522b ifwebkit530b ifsafari ifsafari4 ifiphone ifcanvas"&gt;</td></tr>
</table>
<p>コンディショナルセレクタを活用すると、CSS Hack が不要になります。</p>




<hr />
<h2><a id="boot"></a>Boot Loader - ブートローダー</h2>
<p lang="ja">
  window.boot() 関数が登録されている環境では、
  DOMContentReady(または window.onload)が成立し、
  <a href="http://uupaa-js-spinoff.googlecode.com/svn/trunk/src/uuMeta.js">uuMeta.boot</a>(callback, priority)
  に登録されている関数の処理が完了したタイミングで window.boot(<i>type</i>) をコールバックします。
  <br />
  <i>type</i> には 0x100, 0x101, 0x200, 0x201 が渡されます。
</p>
<ul>
  <li>0x100 - DOMContentLoaded または window.onload が成立し、uuMeta.boot() に登録されている全ての処理が完了した</li>
  <li>0x101 - DOMContentLoaded または window.onload が成立し、uuMeta.boot() に登録されている全ての処理が完了した後で、uuMeta.boot() に再度関数が登録された</li>
  <li>0x200 - uuAltCSS のレンダリングが完了した(初回のみ)</li>
  <li>0x201 - uuAltCSS() を明示的に実行しCSSの再評価/部分再評価が完了した</li>
</ul>




<hr />
<h2><a id="uuAltCSS">uuAltCSS</a></h2>
<p>CSSの評価/再評価, スタイルの取得と設定機能を提供します。</p>

<dl>
  <dt><a id="uuAltCSS">uuAltCSS</a></dt>
  <dd>
    <p>uuAltCSS(<i>context</i> = undefined, <i>rebuild</i> = 0) は
      <i>context</i> 以下の要素についてスタイルの再評価を行います。
      <i>context</i> に undefined または document を指定するとドキュメント全体を再評価します。
      <i>context</i> に ノードを指定すると、ノードの親要素以下の全ての要素を再評価します。
      <i>rebuild</i> に 1 を指定すると、全スタイル情報をクリアし CSS の収集からやり直します。
      0 を指定すると、収集済みの情報を元に CSS の再評価を迅速に行います。
    </p>
  <pre class="note">
  @param Node [context]   - 再評価を行うノードを指定します。デフォルトは undefined です。
                            undefined または document を指定するとドキュメント全体を再評価します。
  @param Number [rebuild] - 再評価方法を指定します。デフォルトは 0 です。
                            1 を指定すると全スタイル情報をクリアし、CSSの収集からやり直します。
                            0 を指定すると、収集済みのデータを元に 再評価を行います。
  </pre>
  </dd>

  <dt><a id="getExStyle">uuAltCSS.getExStyle</a> - style getter</dt>
  <dd>
    <p>uuAltCSS.getExStyle(<i>node</i>, <i>prop</i>) は
      <i>node</i> のスタイルを取得します。
      IE なら currentStyle 相当の値を、それ以外なら getComputedStyle 相当の値を返します。
      <br />-uu-xxx の値も取得できます。
      -
    </p>
  <pre class="note">
  @param Node node   - node を指定します。
  @param String prop - スタイルプロパティを指定します。-uu-xxx も指定できます。
  @return String     - 文字列を返します。
  </pre>
    <div>
      -uu-xxx は 一部のスタイルを上書します。
      <br />例えば、-uu-background-color: black と background-color: black を指定すると、
            background-color: は transparent ( または rgba(0, 0, 0, 0) ) で上書されます。
      <br />このような動作は、-uu-background-xxx, -uu-border-xxx, -uu-box-xxx でも発生します。
    </div>
<style>
.getExStyle {
  -uu-background-color: black;
  background-color: black;
}
</style>
<script>
function fnGetExStyle() {
  var rv = [uuAltCSS.getExStyle(uuQuery(".getExStyle")[0], "background-color"),
            uuAltCSS.getExStyle(uuQuery(".getExStyle")[0], "backgroundColor"),
            uuAltCSS.getExStyle(uuQuery(".getExStyle")[0], "-uu-background-color")];
  alert(rv.join(" "));
}
</script>
<a class="run" href="javascript:fnGetExStyle();void 0">RUN</a>
<div>
  <div class="getExStyle">dummy</div>
</div>
<pre class="eg">
&lt;style&gt;
.getExStyle {
  -uu-background-color: black;
  background-color: black;
}
&lt;/style&gt;
&lt;div class="getExStyle"&gt;dummy&lt;/div&gt;
function fnGetExStyle() {
  var rv = [uuAltCSS.getExStyle(uuQuery(".getExStyle")[0], "background-color"),
            uuAltCSS.getExStyle(uuQuery(".getExStyle")[0], "backgroundColor"),
            uuAltCSS.getExStyle(uuQuery(".getExStyle")[0], "-uu-background-color")];
  alert(rv.join(" ")); <u>// "transparent transparent black"</u>
}
</pre>
  </dd>

  <dt><a id="setExStyle">uuAltCSS.setExStyle</a> - style setter</dt>
  <dd>
    <p>uuAltCSS.setExStyle(<i>node</i>, <i>prop</i>, <i>value</i>, <i>redraw</i> = false) は
      <i>node</i> にスタイルを設定します。
      複数のスタイルを設定する場合は毎回再描画せずに最後に纏めて再描画するか、redraw() で再描画を行うとパフォーマンスが向上します。
      </p>
  <pre class="note">
  @param Node node        - node を指定します。
  @param String prop      - スタイルプロパティを指定します。-uu-xxx も指定できます。
  @param String value     - 値を指定します。
  @param Boolean [redraw] - 再描画する場合に true を指定します。デフォルトは false です。
  </pre>
<style>
.setExStyle-view {
  padding: 10px;
}
.setExStyle {
  -uu-background-color: black;
  background-color: black;
}
</style>
<script>
function fnSetExStyle() {
  var fn = uuAltCSS.setExStyle,
      node = uuQuery(".setExStyle")[0];

  fn(node, "height", "100px");
  fn(node, "border", "10px solid navy");
  fn(node, "-uu-box-shadow", "gray 5px 5px 5px");
  fn(node, "-uu-background-color", "blue");
  fn(node, "-uu-border-radius", "15px", 1);
}
</script>
<a class="run" href="javascript:fnSetExStyle();void 0">RUN</a>
<div class="setExStyle-view">
  <div class="setExStyle">dummy</div>
</div>
<pre class="eg">
&lt;style&gt;
.setExStyle-view {
  padding: 10px;
}
.setExStyle {
  -uu-background-color: black;
  background-color: black;
}
&lt;div class="setExStyle-view"&gt;
  &lt;div class="setExStyle"&gt;dummy&lt;/div&gt;
&lt;/div&gt;
&lt;/style&gt;
function fnSetExStyle() {
  var fn = uuAltCSS.setExStyle,
      node = uuQuery(".setExStyle")[0];

  <u> // width や height の変更は、他の変更に先駆けて行います。</u>
  fn(node, "height", "100px");
  fn(node, "border", "10px solid navy");
  fn(node, "-uu-box-shadow", "gray 5px 5px 5px");
  fn(node, "-uu-background-color", "blue");
  fn(node, "-uu-border-radius", "15px", 1); <u> // redraw </u>
}
</pre>
  </dd>

  <dt><a id="redraw">uuAltCSS.redraw</a> - redraw - 再描画</dt>
  <dd>
    <p>uuAltCSS.redraw() は現在のスタイルに基づき再描画を行います。
    </p>
  </dd>
</dl>

<hr />
<h2>Special function - 特別な機能<a id="spfunc"></a></h2>

<dl>
<!-- -->
  <dt><a id="posfxd">position: fixed</a></dt>
  <dd>
    IE6 に対する CSS2 <a href="http://www.w3.org/TR/CSS2/visuren.html#choose-position">position: fixed</a> の擬似的な機能拡張です。
    <br />
    IE6 ではインラインスタイルで指定できません。CSS で指定します。一度しか指定できません。
    一度しか指定できないため、IE6 では position: fixed ⇒ position: absolute のような動的な変更ができません。
  </dd>

  <dt><a id="alphapng">透過 png</a></dt>
  <dd>
    IE6 に対し、alpha チャネル付き png 画像の透過処理を機能拡張します。
    <br />透過対象は、
    img 要素 または input 要素で、ファイル名の末尾が、".alpha.png" か、class="alpha" が設定されている要素に限定されます。
    <br />
    img 要素 や input 要素の透過処理には1ドットの透明な gif ファイル(<a href="img/1dot.gif">1dot.gif</a>)を利用します。
    1dot.gif を HTML ファイルと同じディレクトリに設置するか、
    window.UUMETA_IMAGE_DIR に 画像ファイルパスを指定する必要があります。
<pre class="eg">
例:
&lt;script&gt; window.<b>UUMETA_IMAGE_DIR</b> = "../../img"; &lt;/script&gt;
&lt;script src="uuAltCSS.js"&gt;&lt;/script&gt;

&lt;img src="dummy.<b>alpha.png</b>" /&gt;
&lt;img class="<b>alpha</b>" src="dummy.png" /&gt;
&lt;input type="image" src="dummy.<b>alpha.png</b>" /&gt;
&lt;input type="image" class="<b>alpha</b>" src="dummy.png" /&gt;
</pre>
  </dd>

  <dt><a id="maxmin">max-width:</a></dt>
  <dd>
    IE6, IE7 に対する、CSS2 <a href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">max-width:</a> min-width: max-height: min-height: の擬似的な機能拡張です。
    <br />
    IE6, IE7 では、uuAltCSS.js を読み込む前に、
    window.UUALTCSS_ENABLE_MAXMIN = 1 を設定すると機能が有効になります。
    デフォルトでは max-width: 系のプロパティは負荷軽減のため OFF になっています。
<pre class="eg">
例:
&lt;script&gt; window.<b>UUALTCSS_ENABLE_MAXMIN</b> = 1; &lt;/script&gt;
&lt;script src="uuAltCSS.js"&gt;&lt;/script&gt;

&lt;table&gt;
&lt;tr&gt;&lt;td style="<b>min-width</b>: 200px"&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</pre>
  </dd>


  <dt><a id="opacity">opacity:</a></dt>
  <dd>
    IE6, IE7, IE8 に対する CSS3 <a href="http://www.w3.org/TR/css3-color/#transparency">opacity:</a> の擬似的な機能拡張です。
    <br />
    IE6, IE7, IE8 ではインラインスタイルで指定できません。
    CSS または <a href="#setExStyle">setExStyle()</a> で指定します。
  </dd>

  <dt><a id="displaytable">-uu-display: table</a></dt>
  <dd>
    IE6, IE7 に対する CSS2 <a href="http://www.w3.org/TR/CSS2/visuren.html#display-prop">display: table</a>, display: table-cell の擬似的な機能拡張です。
    <br />
    IE6, IE7 ではインラインスタイルで指定できません。CSS で指定します。一度指定すると変更できません。
    <br />
    -uu-display: table が指定された要素とその子要素をテーブル(table)要素, セル(td)要素に再構築します(DOM ツリーを改変します)。</li>
  </dd>

  <dt><a id="textshadow">-uu-text-shadow:</a></dt>
  <dd>
    IE6, IE7, IE8 に対する CSS3 <a href="http://www.w3.org/TR/css3-text/#text-shadow">text-shaodw:</a> の擬似的な機能拡張です。
    <br />
    インラインスタイルでは指定できません。 CSS または <a href="#setExStyle">setExStyle()</a> で指定します。
    <br />
    <b>-uu-text-shadow: &lt;color&gt; || &lt;offsetx&gt; &lt;offsety&gt; &lt;blur&gt;</b>
    <br />
    で、影の色、オフセット位置、影の大きさを指定します。
    複数の影には対応していません。最大で1つです。
    <br />
    IE6, IE7, IE8 でレイアウトが崩れる場合は、-uu-text-shadow: を設定する要素の width: に px 単位の値を指定してください。
    canvas 要素上に -uu-text-shadow: を指定した要素を配置すると、ジャギーが発生する場合があります。

<pre class="eg">
.text-shadow {
  text-shadow: white 1px 1px 10px;
  -uu-text-shadow: white 1px 1px 10px;
}
&lt;h2 class="text-shadow"&gt;-uu-text-shadow: white 1px 1px 10px;&lt;/h2&gt;
</pre>
    <style>
      .text-shadow {
        text-shadow: white 1px 1px 10px;
        -uu-text-shadow: white 1px 1px 10px;
      }
    </style>
      <h2 class="text-shadow">-uu-text-shadow: white 1px 1px 10px;</h2>
  </dd>

  <dt><a id="boxshadow">-uu-box-shadow:</a></dt>
  <dd>
    様々なブラウザに対する CSS3 <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">box-shadow:</a> の擬似的な機能拡張です。
    <br />
    インラインスタイルでは指定できません。 CSS または <a href="#setExStyle">setExStyle()</a> で指定します。
    <a href="README.htm#ViewBox">ViewBox</a> が必要です。
    <br />
    <b>-uu-box-shadow: &lt;color&gt; || &lt;offsetx&gt; &lt;offsety&gt; &lt;blur&gt;</b>
    <br />
    で、影の色、オフセット位置、影の大きさを指定します。
    複数の影には対応していません。最大で1つです。
<pre class="eg">
.view-box-shadow { padding: 20px; }
.box-shadow { -uu-box-shadow: white 0px 0px 10px; }
&lt;div class="view-box-shadow"&gt;
  &lt;div class="box-shadow"&gt;
    -uu-box-shadow: white 0px 0px 10px;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
    <style>
      .view-box-shadow { padding: 20px; }
      .box-shadow { -uu-box-shadow: white 0px 0px 10px; }
    </style>
    <div class="view-box-shadow">
      <div class="box-shadow">
        -uu-box-shadow: white 0px 0px 10px;
      </div>
    </div>
  </dd>

  <dt><a id="boxreflect">-uu-box-reflect:</a></dt>
  <dd>
    様々なブラウザに対する CSS0 <a href="http://webkit.org/blog/182/css-reflections/">-webkit-box-reflect:</a> の擬似的な機能拡張です。
    <br />
    インラインスタイルでは指定できません。 CSS または <a href="#setExStyle">setExStyle()</a> で指定します。
    <a href="README.htm#ViewBox">ViewBox</a> が必要です。
    img 要素にのみ指定可能です。
    <br />
    <b>-uu-box-reflect: &lt;direction&gt; &lt;offset&gt; &lt;mask&gt;</b>
    <br />
    で、方向とオフセットを指定します。オフセットは省略できます。
    mask は無視します。direction は below のみサポートします。
    鏡のような効果を持つマスクが自動的に適用されます。

<pre class="eg">
.box-reflect-table { -uu-display: table; display: table; }
.box-reflect-table > li { display: table-cell; }
.view-box-reflect { padding: 20px; }
.box-reflect { -uu-box-reflect: below 2px; }
&lt;ul class="box-reflect-table"&gt;
  &lt;li&gt;
    &lt;div class="view-box-reflect"&gt;
      &lt;img class="box-reflect" src="img/cover09.jpg" /&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div class="view-box-reflect"&gt;
      &lt;img class="box-reflect" src="img/cover10.jpg" /&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</pre>
    <style>
      .box-reflect-table { -uu-display: table; display: table; }
      .box-reflect-table > li { display: table-cell; }
      .view-box-reflect { padding: 20px; }
      .box-reflect { -uu-box-reflect: below 2px; }
    </style>
    <ul class="box-reflect-table">
      <li>
        <div class="view-box-reflect">
          <img class="box-reflect" src="img/cover09.jpg" />
        </div>
      </li>
      <li>
        <div class="view-box-reflect">
          <img class="box-reflect" src="img/cover10.jpg" />
        </div>
      </li>
    </ul>
  </dd>

  <dt><a id="bradius">-uu-border-radius:</a></dt>
  <dd>
    様々なブラウザに対する CSS3 <a href="http://www.w3.org/TR/css3-background/#the-border-radius/">border-radius:</a> の擬似的な機能拡張です。
    <br />
    インラインスタイルでは指定できません。 CSS または <a href="#setExStyle">setExStyle()</a> で指定します。
    <a href="README.htm#ViewBox">ViewBox</a> が必要です。
    <br />
    <b>-uu-border-radius: &lt;length&gt;{1,4}</b>
    <br />
    で、最大で4つの角の半径(角丸)を指定します。

<pre class="eg">
.view-border-radius { padding: 10px; }
.border-radius {
  width: 300px;
  height: 200px;
  border: 3px solid white;
  -uu-border-radius: 0 5em 20px 10px;
}
&lt;div class="view-border-radius"&gt;
  &lt;div class="border-radius"&gt;
  .border-radius {
    width: 300px;
    height: 200px;
    border: 3px solid white;
    -uu-border-radius: 0 5em 20px 10px;
  }
  &lt;/div&gt;
&lt;/div&gt;
</pre>
    <style>
      .view-border-radius { padding: 10px; }
      .border-radius {
        width: 300px;
        height: 200px;
        border: 3px solid white;
        -uu-border-radius: 0 5em 20px 10px;
      }
    </style>
    <div class="view-border-radius">
      <div class="border-radius">
      .border-radius {
        width: 300px;
        height: 200px;
        border: 3px solid white;
        -uu-border-radius: 0 5em 20px 10px;
      }
      </div>
    </div>



    <style>
      .view-border-radius2 { padding: 10px; }
      .border-radius2 {
        width: 160px;
        height: 100px;
        border: 3px solid white;
        -uu-border-radius: 0 5em 20px 5em;
        -uu-background-image: url(img/cover14.jpg);
      }
    </style>
    <div class="view-border-radius2">
      <div class="border-radius2"></div>
    </div>

    <br />
    border-top-color: を ボーダーカラーとして使用します。四辺に異なる色を設定してもボーダーは単色になります。
    <br />
    IE6, IE7 でコンテントボックスの高さが変化する場合があります。
    そのような場合は、コンディショナルセレクタで IE6, IE7 の場合だけ ExCSSNode の子要素に padding を設定します。
<pre class="eg">
例:
html.ifie6 .excssnode>div,
html.ifie7 .excssnode>div { padding: 10px; }
</pre>
  </dd>

  <dt><a id="gradient">-uu-gradient()</a></dt>
  <dd>
    様々なブラウザに対する CSS0 <a href="http://webkit.org/blog/175/introducing-css-gradients/">-webkit-gradient()</a> の擬似的な機能拡張です。
    <br />
    インラインスタイルでは指定できません。 CSS または <a href="#setExStyle">setExStyle()</a> で指定します。
    <a href="README.htm#ViewBox">ViewBox</a> が必要です。
    <br />
    <b>-uu-gradient(&lt;type&gt;, &lt;point&gt; [, &lt;radius&gt;]?, &lt;point&gt; [, &lt;radius&gt;]? [, &lt;stop&gt;]*)</b>
    <br />
    type には linear または radial を指定します。
    point には線形/円形グラデーションの開始位置(x, y)を px 単位の値か % で指定します。
    radius には円形グラデーションの内径, 外径の大きさを 数値で指定します。
    stop には from(色), to(色) でグラデーションの開始,終了色を指定します。
    また color-stop(位置, 色) でグラデーションの中間色を追加できます。位置には 0.0 ～ 1.0 までの値を指定します。
    <br />グラデーションは http://tools.westciv.com/gradients/ で作成できます。

<pre class="eg">
.view-gradient { padding: 10px; }
.gradient {
  width: 400px;
  height: 200px;
  -uu-background-image:
    -uu-gradient(linear, right top, left bottom,
                 from(#66ff00),
                    color-stop(0.3, #ffff00), color-stop(0.7, #ff00ff),
                 to(#00aaff));
  -uu-border-radius: 10px;
}
</pre>
    <style>
      .view-gradient { padding: 10px; }
      .gradient {
        width: 400px;
        height: 200px;
        -uu-background-image:
          -uu-gradient(linear, right top, left bottom,
                       from(#66ff00),
                          color-stop(0.3, #ffff00), color-stop(0.7, #ff00ff),
                       to(#00aaff));
        -uu-border-radius: 10px;
      }
    </style>
    <div class="view-gradient">
      <div class="gradient">-uu-gradient()</div>
    </div>
  </dd>


  <dt><a id="mbg">multiple backgrounds</a></dt>
  <dd>
    様々なブラウザに対する CSS3 <a href="http://www.w3.org/TR/css3-background/#layering">Multiple backgrounds</a> の擬似的な機能拡張です。
    <br />
    インラインスタイルでは指定できません。 CSS または <a href="#setExStyle">setExStyle()</a> で指定します。
    <a href="README.htm#ViewBox">ViewBox</a> が必要です。
    <br />
    サポートするプロパティは、-uu-background, -uu-background-image, -uu-background-repeat, -uu-background-position, -uu-background-color です。
    <br />

<pre class="eg">
.view-mbg { padding: 10px; }
.mbg {
  border: 2px solid orangered;
  -uu-border-radius: 20px;
  width: 480px;
  height: 340px;
  -uu-background: url(img/cover02.jpg) no-repeat 20% 20%,
                  url(img/cover03.jpg) no-repeat 30% 30%,
                  url(img/cover04.jpg) no-repeat 40% 40%,
                  url(img/cover06.jpg) no-repeat 50% 50%,
                  -uu-gradient(linear, 50% 0%, 50% 50%, from(#D10404), to(#FFC60A));
}
</pre>
    <style>
      .view-mbg { padding: 10px; }
      .mbg {
        border: 2px solid orangered;
        -uu-border-radius: 20px;
        width: 480px;
        height: 340px;
        -uu-background: url(img/cover02.jpg) no-repeat 20% 20%,
                        url(img/cover03.jpg) no-repeat 30% 30%,
                        url(img/cover04.jpg) no-repeat 40% 40%,
                        url(img/cover06.jpg) no-repeat 50% 50%,
                        -uu-gradient(linear, 50% 0%, 50% 50%, from(#D10404), to(#FFC60A));
      }
    </style>
    <div class="view-mbg">
      <div class="mbg"></div>
    </div>


    IEでは、"repeat" を指定した場合に、背景画像をボーダーの内径に収まるようにクリッピングしますが、
    "no-repeat", "repeat-x", "repeat-y" を指定した場合はクリッピングしません(uuCanvas.js の VMLモードの制限)。
    "no-repeat", "repeat-x", "repeat-y" と角丸を同時に使う場合は、角の近くに背景画像を設置しないなどの工夫が必要です。
    <br />-uu-background-color: transparent と 角丸は同時に使用できません(制限)。transparent を指定すると、先祖要素の背景色で塗りつぶされます。
    <br />背景色に不透明度付きの色は指定できません。-uu-background-color: rgba(200, 100, 50, 0.5) は rgba(200, 100, 50, 1) と同じ結果になります。
  </dd>

  <dt><a id="boxeffect">-uu-box-effect:</a></dt>
  <dd>
    -uu-box-effect: は以下のプロパティの効果(エフェクト)を有効/無効にするプロパティです。<br />
    <ul>
      <li>-uu-box-shadow:</li>
      <li>-uu-box-reflect:</li>
      <li>-uu-border-radius:</li>
      <li>-uu-gradient()</li>
      <li>-uu-background:</li>
      <li>-uu-background-image:</li>
      <li>-uu-background-repeat:</li>
      <li>-uu-background-position:</li>
    </ul>
    インラインスタイルでは指定できません。 CSS または <a href="#setExStyle">setExStyle()</a> で指定します。
    <a href="README.htm#ViewBox">ViewBox</a> が必要です。
    <br />
    <b>-uu-box-effect: none | auto</b>
    <br />
    デフォルトは auto です。auto を指定するとエフェクトが有効になり、none を指定するとエフェクトが無効になります。
</dl>
</body>
</html>
